<!--对象存储用户-->
<template>
    <!-- style="margin-top:1rem" -->
    <a-row>
        <NoAuthPage v-showNoAuth="'D15-1'" :imgBoxStyle="{ height: '40vh', margin: '0 10px 10px' }" />
        <a-col :xs='24' :sm='24' :md='24' :lg='24' :xl='24' :xxl='24' v-userAuth="'D15-1'">
            <div style="margin:0 0 1em 0 ">
                <a-tooltip placement='bottom' v-userAuth="'D15-2'">
                    <template slot='title'>
                        <span>{{ $t('Create') }}</span>
                    </template>
                    <a-button type="primary" @click="create = true; selectedRowKeys = []">
                        <!-- icon='file-add' -->
                        <!-- <i class="icon icon-new16f"></i> -->
                        <Iconfont class="icon" type="icon-new16f"></Iconfont>
                        {{ $t('Create') }}
                    </a-button>
                </a-tooltip>
                <a-tooltip placement='bottom' v-userAuth="'D15-3'">
                    <template slot='title'>
                        <span>{{ $t('Edit') }}</span>
                    </template>
                    <a-button :disabled="isAdmin == true" type='primary' style="margin-left:1em"
                        @click="openmodal('edit')">
                        <!-- icon='form' -->
                        <!-- <i class="icon icon-edit16f"></i> -->
                        <Iconfont class="icon" type="icon-edit16f"></Iconfont>
                        {{ $t('Edit') }}
                    </a-button>
                </a-tooltip>

                <a-tooltip placement='bottom' v-userAuth="'D15-4'">
                    <template slot='title'>
                        <span>{{ $t('Child-user') }}{{ $t('Operate') }}</span>
                    </template>
                    <a-button :disabled="isAdmin == true" type='primary' style="margin-left:1em"
                        @click="openmodal('editsub')">
                        <!-- icon='team' -->
                        <!-- <i class="icon icon-subuser16f"></i> -->
                        <Iconfont class="icon" type="icon-subuser16f"></Iconfont>
                        {{ $t('Child-user') }}{{ $t('Operate') }}
                    </a-button>
                </a-tooltip>
                <a-tooltip placement='bottom' v-userAuth="'D15-5'">
                    <template slot='title'>
                        <span>S3 {{ $t('Key') }}{{ $t('Operate') }}</span>
                    </template>
                    <a-button :disabled="isAdmin == true" type='primary' style="margin-left:1em"
                        @click="openmodal('ekey')">
                        <!-- icon='key' -->
                        <!-- <i class="icon icon-password16f"></i> -->
                        <Iconfont class="icon" type="icon-password16f"></Iconfont>
                        S3 {{ $t('Key') }}{{ $t('Operate') }}
                    </a-button>
                </a-tooltip>
                <a-tooltip placement='bottom' v-userAuth="'D15-6'">
                    <template slot='title'>
                        <span>{{ $t('Delete') }}</span>
                    </template>
                    <a-button :disabled="isAdmin == true" type='danger' style="margin-left:1em"
                        @click="openmodal('del')">
                        <!-- icon='close-circle' -->
                        <!-- <i class="icon icon-error16f"></i> -->
                        <Iconfont class="icon" type="icon-error16f"></Iconfont>
                        {{ $t('Delete') }}
                    </a-button>
                </a-tooltip>
            </div>
            <div class="tabstyle">
            <a-table  rowKey='name' :columns='usercolumns' :loading="loading" :dataSource='userdata'
                :rowSelection='{type: "radio", selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect: onSelect,getCheckboxProps: getCheckboxProps}' 
                :pagination="false" size='small' :locale="defaultSetting">
                <div slot="user_id" slot-scope="text, record">
                    <span>{{ record.user_id }}</span>
                    <span v-if="$store.state.language == 'zh'">({{ $t('Child-user') + record.subusers.length +
                        $t('Piece')
                        }})</span>
                    <span v-else>({{ $t('Child-user') + ' ' + record.subusers.length + ' ' + $t('Piece') }})</span>
                </div>
                <template slot="emailRender" slot-scope="email,record">
                    <span>{{ email ? email : '-' }}</span>
                </template>
                <template slot="buckets" slot-scope="buckets">
                    <span>{{ buckets.length }}</span>
                </template>
                <template slot="suspended" slot-scope='suspended'>
                    <span :class="suspended == true ? 'red-circle' : 'green-circle'"></span>
                    {{ suspended == true ? $t('Disable') : $t('Enable') }}
                    <!-- <a-tag :color="suspended == true?'var(--mainRedColor)':'var(--mainGreenColor)'">{{suspended == true?$t('Disable'):$t('Enable')}}</a-tag> -->
                </template>
            </a-table>
            <a-pagination v-model="current" :page-size-options="pageSizeOptions" :total="total"
                :show-total="total => $store.state.language == 'zh' ? `共 ${total} 条数据` : `A-total-of ${total} data`"
                show-size-changer :page-size="pageSize" @showSizeChange="handlePageSizeChange"
                @change="handlePageChange">
                <template slot="buildOptionText" slot-scope="props">
                    <span>{{ props.value }} {{ $t('条/页') }}</span>
                </template>
            </a-pagination>
        </div>
        </a-col>
        <a-col :xs='24' :sm='24' :md='24' :lg='24' :xl='24' :xxl='24' v-userAuth="'D15-1'">
            <div class="card-container" id='content'>
                <a-tabs type='card'>
                    <a-tab-pane :tab="$t('Details')" key='1' forceRender>
                        <Detail :tarname='onerecord'></Detail>
                    </a-tab-pane>
                    <a-tab-pane :tab="$t('Key')" key='2' forceRender>
                        <Secret :tarname='onerecord'></Secret>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </a-col>
        <Cuser :cc='create' @omodal='changemodal' :tarname='areadata'></Cuser>
        <Euser :ee='edit' @omodal='changemodal' :tarname='onerecord' :areadata='areadata'></Euser>
        <Subuser :ss='editsub' @omodal='changemodal' :tarname='onerecord'></Subuser>
        <Skey :kk='ekey' @omodal='changemodal' :tarname='onerecord'></Skey>
    </a-row>
</template>
<script>
import Detail from './detail/detail'
import Secret from './secret/secret'
import Cuser from './userpro/cuser'
import Euser from './userpro/euser'
import Subuser from './userpro/subuser'
import Skey from './userpro/skey'
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'
export default {
    name: 'User',
    components: { Detail, Secret, Cuser, Euser, Subuser, Skey, EmptyData, NoAuthPage },
    data() {
        return {
            usercolumns: [
                { title: this.$t('User') + this.$t('Name'), dataIndex: 'user_id', key: 'user_id', sorter: (a, b) => a.user_id.length - b.user_id.length, scopedSlots: { customRender: 'user_id' } },
                { title: this.$t('Nickname'), dataIndex: 'display_name', key: 'display_name' },
                { title: this.$t('Email'), dataIndex: 'email', key: 'email', scopedSlots: { customRender: 'emailRender' } },
                { title: this.$t('Status'), dataIndex: 'suspended', key: 'suspended', scopedSlots: { customRender: 'suspended' } },
                { title: this.$t('Maximum-buckets'), dataIndex: 'max_buckets', key: 'max_buckets' },
                { title: this.$t('拥有桶的个数'), dataIndex: 'buckets', key: 'buckets', scopedSlots: { customRender: 'buckets' } },
                // {title: this.$t('Default')+this.$t('Storage-area'),dataIndex:'placement',key:'placement'}
            ],
            selectedRowKeys: [],
            // pagination: {
            //     defaultPageSize: 5,
            //     showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
            //     showSizeChanger: true,
            //     pageSizeOptions: ['5', '15', '20', '25'],
            //     onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
            //     onChange: (page, pageSize) => { this.selectedRowKeys = []; },
            //     buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            // },
            userdata: [],
            create: false,
            edit: false,
            editsub: false,
            ekey: false,
            onerecord: '',
            loading: true,
            basebucket: '',
            areadata: '',
            num: 0,
            defaultSetting: { emptyText: <EmptyData /> },
            isAdmin: false,
            pageSizeOptions: ['5', '10', '20', '50'],
            current: 1,  // 当前页
            pageSize: 10,  // 每页显示条数
            total: 0,
        }
    },
    mounted() {
        this.getdata(this.current, this.pageSize)
    },
    computed: {
        getbasebucket() {
            return this.$store.state.basebucket
        },
        getlanguage() {
            return this.$store.state.language
        },
    },
    watch: {
        getlanguage(val) {
            this.usercolumns = [
                // {title: this.$t('User')+ this.$t('Name'),dataIndex:'name',key:'name',sorter:(a,b)=>a.name.length - b.name.length},
                { title: this.$t('User') + this.$t('Name'), dataIndex: 'user_id', key: 'user_id', sorter: (a, b) => a.user_id.length - b.user_id.length, scopedSlots: { customRender: 'user_id' } },
                { title: this.$t('Nickname'), dataIndex: 'display_name', key: 'display_name' },
                { title: this.$t('Email'), dataIndex: 'email', key: 'email' },
                { title: this.$t('Status'), dataIndex: 'suspended', key: 'suspended', scopedSlots: { customRender: 'suspended' } },
                { title: this.$t('Maximum-buckets'), dataIndex: 'max_buckets', key: 'max_buckets' },
                // {title: this.$t('Default')+this.$t('Storage-area'),dataIndex:'placement',key:'placement'}
            ]
        }
    },
    methods: {
        handlePageSizeChange(current, pageSize) {
            this.pageSize = pageSize;
            this.getdata(current, pageSize);
            this.selectedRowKeys = []  
            this.isAdmin = false
        },
        handlePageChange(page) {
            this.current = page;
            this.getdata(page, this.pageSize); 
            this.selectedRowKeys = []
            this.isAdmin = false
        },
        getdata(page, pageSize) {
            const params = {
                page: page,
                page_size: pageSize
            }
            this.loading = true
            request('get', 'rgw/v2/user/', params).then(res => {
                // console.log('获取对象存储的用户列表', res)
                if (res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                } else {
                if (res.status == 200) {
                this.userdata = res.data.user_infos
                this.total = res.data.count
                this.getbasedata()
                if (this.userdata.length !== 0) {
                    this.onerecord = this.userdata[this.num]
                }
                }
                }
                // if(res.data.flag == 1) {
                //     if(Object.keys(res.data.params).length == 0) {
                //         this.$message.error(this.$t('Unknown-error'));
                //     }else {
                //         this.$message.error(res.data.params.detail);
                //     }
                //     this.loading = false;
                //     // this.$message.error(res.data.params.detail);
                //     // this.loading = false;
                // }
            }).catch(err => {

            }).finally(() => {
                this.loading = false;
            })
        },
        getbasedata() {
            // this.$axios.get(this.allurl+'rgw/bucket/_info').then(res=>{
            request('get', 'rgw/user/getNameAll').then(res => {
                if (res.data.flag == 1) {
                    this.$message.error(res.data.params.detail);
                    this.$store.commit('getbasebucket', {
                        basebucket: [],
                    })
                } else {
                    this.$store.commit('getbasebucket', {
                        basebucket: res.data,
                    })
                }
                //暂时注释，换了接口，新接口只有所有者 for(var i=0;i<res.data.zone.length;i++){
                //     if(res.data.zone[i].id == 'default-placement'){
                //         this.areadata = res.data.zone[i]
                //     }
                // }
            })
        },
        getCheckboxProps(record) {
            return {
                props: {
                    // disabled: record.user_id === 'admin'
                }
            }
        },
        onSelect(record, selected, selectedRows) {
            this.target = record;
            for (let i = 0; i < this.userdata.length; i++) {
                if (this.userdata[i].user_id == record.user_id) {
                    this.onerecord = this.userdata[i]
                    this.num = i
                }
            }
        },
        onSelectChange(selectedRowKeys, value) {
            // this.target = selectedRowKeys.toString()
            this.isAdmin = value[0].user_id == 'admin'
            this.selectedRowKeys = selectedRowKeys
        },
        openmodal(name) {
            if (this.selectedRowKeys.length != 0) {
                if (name == 'edit') {
                    this.edit = true
                }
                else if (name == 'editsub') {
                    this.editsub = true
                }
                else if (name == 'ekey') {
                    this.ekey = true
                }
                else if (name == 'del') {
                    this.del()
                }
            }
            else {
                this.$notification['error']({
                    message: this.$t('Choose') + this.$t('Operating-object')
                })
            }
        },

        //删除用户
        del() {
            let _this = this;
            if (this.target.user_id == 'admin') {
                this.$notification['error']({
                    message: this.$t('No-del-admin')
                })
            } else {
                this.$confirm({
                    title: this.$t('Delete') + this.$t('User'),
                    content: this.$t('Sure-to-del') + ": " + this.target.user_id + ' ？',
                    cancelText: this.$t('Cancel'),
                    okText: this.$t('Sure'),
                    okType: 'danger',
                    onOk() {
                        request('DELETE', 'rgw/user', {
                            // data:{
                            name: _this.target.user_id
                            // }
                        }).then(res => {
                            _this.model(res.data.id) //返回模板
                            _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                            // _this.gettask()  //任务栏信息
                            _this.getdata(this.current, this.pageSize)
                            _this.selectedRowKeys = []; // 将选择的项清空
                            _this.$store.commit('toUpdateUsers', true);
                        })
                    },
                    onCancel() {
                    }
                })
            }
        },
        callback(key) {

        },
        changemodal(val, isCancel) {
            this.create = val
            this.edit = val
            this.editsub = val
            this.ekey = val
            if (!isCancel) {
                this.getdata(this.current, this.pageSize)
            }
        }
    }
}
</script>
<style>
#content {
    border-left: 3px solid var(--themeColor);
    /* height:20em; */
    box-shadow: 5px 2px 11px #DEDEDE
}

.ant-pagination {
    float: right;
    margin: 16px;
}
</style>
